<template>
  <div class="add-members" v-if="!getIsPhone">
    <div class="title">
      <span class="icon left">
        <i class="iconfont icontg_tianjia"></i>
      </span>
      <span class="name">
        添加会员
      </span>
      <span class="icon right hover-style" @click="handleClose">
        <i class="iconfont iconty_guanbi"></i>
      </span>
    </div>
    <div class="content-wrapper">
      <div class="content">
        <div class="set-account">
          <input-item-template :title="'账号类型'">
            <radio-selector 
              :options="options"
              :activeSwitchIndex="activeSwitchIndex"
              @click="updateActiveSwitchIndex"
            ></radio-selector>
          </input-item-template>
          <input-item
            :type="'text'" 
            :title="'下级账号'" 
            :placeholder="'请输入账号'"
            @input="updateAccountName"
          ></input-item>
          <input-item
            :type="'password'" 
            :title="'登陆密码'" 
            :placeholder="'输入为下级创建账号的密码'"
            @input="updatePwd"
          ></input-item>
        </div>
        <div class="set-refund">
          <input-item-template
            :title="'彩票返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{lotteryRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <progress-bar :percent="lotteryRefundRate" @click="changeLotteryRefund"></progress-bar>
          </input-item-template>
          <input-item-template
            :title="'AG返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{agRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <progress-bar :percent="agRefundRate" @click="changeAGRefund"></progress-bar>
          </input-item-template>
          <input-item-template
            :title="'皇冠返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{chrownRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <progress-bar :percent="chrownRefundRate" @click="changeChrownRefund"></progress-bar>
          </input-item-template>
          <input-item-template
            :title="'分红'"
            >
            <template v-slot:refund>
              <div>
                <span>{{bonusRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <progress-bar :percent="bonusRefundRate" @click="changeBonusRefund"></progress-bar>
          </input-item-template>
          <input-item-template
            :title="'日工资'"
            >
            <template v-slot:refund>
              <div>
                <span>{{salaryRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <progress-bar :percent="salaryRefundRate" @click="changeSalaryRefund"></progress-bar>
          </input-item-template>
        </div>
      </div>
      </div>
    <div class="buttons">
      <button class="btn button-unselected hover-style" @click="handleClose">取消</button>
      <button class="btn button-selected hover-style" @click="handleAddMember">添加会员</button>
    </div>
  </div>
  <div class="add-members" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          添加会员
        </div>
      </template>
      <template v-slot:right>
        <div @click="handleAddMember">添加</div>
      </template>
    </header-template-phone>
    <div class="content">
      <div class="set-account box-shadow">
        <input-item-template :title="'账号类型'">
          <radio-selector 
            :options="options"
            :activeSwitchIndex="activeSwitchIndex"
            @click="updateActiveSwitchIndex"
          ></radio-selector>
        </input-item-template>
        <input-item
          :type="'text'" 
          :title="'下级账号'" 
          :placeholder="'请输入账号'"
          @input="updateAccountName"
        ></input-item>
        <input-item
          :type="'password'" 
          :title="'登陆密码'" 
          :placeholder="'输入为下级创建账号的密码'"
          @input="updatePwd"
        ></input-item>
      </div>
      <div class="set-refund box-shadow">
        <input-item-template
          :title="'彩票返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{lotteryRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <progress-bar :percent="lotteryRefundRate" @click="changeLotteryRefund"></progress-bar>
        </input-item-template>
        <input-item-template
          :title="'AG返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{agRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <progress-bar :percent="agRefundRate" @click="changeAGRefund"></progress-bar>
        </input-item-template>
        <input-item-template
          :title="'皇冠返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{chrownRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <progress-bar :percent="chrownRefundRate" @click="changeChrownRefund"></progress-bar>
        </input-item-template>
        <input-item-template
          :title="'分红'"
          >
          <template v-slot:refund>
            <div>
              <span>{{bonusRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <progress-bar :percent="bonusRefundRate" @click="changeBonusRefund"></progress-bar>
        </input-item-template>
        <input-item-template
          :title="'日工资'"
          >
          <template v-slot:refund>
            <div>
              <span>{{salaryRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <progress-bar :percent="salaryRefundRate" @click="changeSalaryRefund"></progress-bar>
        </input-item-template>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import RadioSelector from '@/components/base/radio-selector/radio-selector'
import HeaderBack from '@/components/base/header-back/header-back'
import InputItemTemplate from '@/components/input-item-template/input-item-template'
import ProgressBar from '@/components/progress-bar/progress-bar'
import InputItem from '@/pages/login/components/input-item'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    RadioSelector,
    InputItem,
    InputItemTemplate,
    ProgressBar,
    HeaderBack
  },
  data() {
    return {
      options: [
        {
          id: 1,
          name: '代理'
        },
        {
          id: 2,
          name: '会员'
        }
      ],
      activeSwitchIndex: 0,
      accountType: '代理',
      accountName: '',
      password: '',
      salaryRefundRate: 0,
      lotteryRefundRate: 0,
      agRefundRate: 0,
      bonusRefundRate: 0,
      chrownRefundRate: 0
   }
  },
  methods:{
    updateActiveSwitchIndex(index) {
      this.activeSwitchIndex = index
      this.accountType = this.activeSwitchIndex == 0 ? '代理' : '会员'
    },
    updateAccountName(name) {
      this.accountName = name
    },
    updatePwd(pwd) {
      this.password = pwd
    },
    changeLotteryRefund(persent) {
      this.lotteryRefundRate = persent
    },
    changeAGRefund(persent) {
      this.agRefundRate = persent
    },
    changeChrownRefund(persent) {
      this.chrownRefundRate = persent
    },
    changeBonusRefund(persent) {
      this.bonusRefundRate = persent
    },
    changeSalaryRefund(persent) {
      this.salaryRefundRate = persent
    },
    handleAddMember() {
      // if (this.accountName !== '' && this.password !== '' ) {
        let data = {
          accountType: this.accountType,
          accountName: this.accountName,
          password: this.password,
          salaryRefundRate: this.salaryRefundRate,
          lotteryRefundRate: this.lotteryRefundRate,
          agRefundRate: this.agRefundRate,
          bonusRefundRate: this.bonusRefundRate,
          chrownRefundRate: this.chrownRefundRate
        }
        this.$emit('click', data)
        if (this.getIsPhone) {
          this.$router.go(-1)
        }
      // }
    },
    handleClose() {
      this.$emit('close')
    }
  },
  computed: {
    ...mapGetters('lottery', ['getUserInfo', 'getIsPhone']),
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    ::-webkit-scrollbar
      width: 4px;
      height: 16px;
      background-color: #F5F5F5;
    ::-webkit-scrollbar-track
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    ::-webkit-scrollbar-thumb
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    .add-members 
      position absolute  
      width 480px
      height 350px 
      background $color-text-button
      top 50%
      left 50% 
      transform translate(-50%, -50%)
      border-radius 3px
      .title 
        height 48px 
        width 100% 
        background $color-theme-dark 
        display flex 
        align-items center 
        justify-content space-between
        box-sizing border-box 
        padding 0 15px 
        color #fff 
        position absolute 
        left 0
        right 0
        top 0
        z-index 1000
        .icon 
          color #fff 
          &.left 
            .iconfont 
              font-size 16px
          &.right 
            .iconfont 
              color $color-theme-red 
          .iconfont 
            font-size 24px
      .content-wrapper 
        box-sizing border-box 
        padding 0 20px
        padding-top 48px 
        padding-bottom 80px
        height 100%
        overflow-y scroll  
        // .content 
      .content-wrapper >>> .input-item 
        padding 10px 0px
      .buttons 
        position absolute 
        bottom 0
        left 0
        right 0
        height 80px 
        font-size 0
        text-align center
        background $color-text-button 
        z-index 1000
        .btn 
          width 90px 
          height 36px
          font-size 14px
          margin-top 24px 
          margin-right 10px

  @media screen and (max-width 750px)
    .content    
      box-sizing border-box 
      padding 0 10px
      padding-top 58px 
      overflow hidden 
      .set-account
        border-radius 3px
        background $color-text-button 
        .input-item 
          height 70px 
          padding 10px 
          box-sizing border-box
          display flex 
          flex-direction column
          justify-content space-around
      .set-refund 
        margin-top 10px 
        border-radius 3px
        background $color-text-button 
          
</style>